<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>支付</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css2/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/css2/common.css" rel="stylesheet"/>
    <link href="/css2/cart.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css">
</head>
<body class="graybg-theme">
    <!--头部-->
        <div class="topper">
            <div class="wrapper">
                <div class="left-bar">
                    <div class="back-home divider">
                        <em></em><a href="index.html">商城首页</a>
                    </div>
                    <div class="item"><a href="">商家中心</a></div>
                </div>
                <div class="right-bar">
                    <div class="login-user sub-menu">
                        <a class="menu-hd" href="">txtangxia<em></em></a>
                        <div class="down">
                            <a href="">内容</a>
                            <a href="">内容</a>
                            <a href="">内容</a>
                        </div>
                    </div>
                    <div class="item"><a href="">消息（<span class="txt-theme">0</span>）</a></div>
                    <div class="logout divider"><a href="">退出</a></div>
                    <span class=""></span>
                    <div class="cart"><em></em><a href="">购物车<span class="txt-theme">2</span>件</a></div>
                    <div class="order"><em></em><a href="">我的订单</a></div>
                    <div class="fav"><em></em><a href="">我的收藏</a></div>
                    <div class="help"><em></em><a href="">帮助中心</a></div>
                </div>
            </div>
        </div>
        <div class="cart-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="/img/logo.png" alt="logo" /></a>
            </div>
            <div class="step-box">
                <div class="row">
                    <div class="step first active col-3">
                        <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
                    </div>
                    <div class="step active col-3">
                        <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
                    </div>
                    <div class="step active col-3">
                        <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
                    </div>
                    <div class="step last col-3">
                        <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
                    </div>
                </div>
            </div>
        </div>
    <!--头部-->

    <div class="wrapper">
        <div class="pay-wrap">
            <div class="order-result">
                <div class="section clearfix">
                    <img src="/img/ico/order-success.jpg" class="ico" />
                    <div class="titbox" th:each="oi:${orderInfo}">
                        <div class="tit">订单提交成功，应付金额 [[${oi.price}]]元</div>
                        <div class="stit">订单号：[[${oi.code}]] </div>
                        <div>请在<span class="time">15 分 0 秒</span>内完成支付，超时后取消订单</div>

                        <img th:src="${'https://api.qrserver.com/v1/create-qr-code/?data='+qrCode}">
                    </div>
<!--                    <div class="mt20">-->
<!--                        <div class="meta">-->
<!--                            <div class="hd">商品</div>-->
<!--                            <div class="bd">纤佳乐破壁料理机 2.5升 西瓜红型号:QJL-PB921  西瓜红* 2</div>-->
<!--                        </div>-->
<!--                        <div class="meta">-->
<!--                            <div class="hd">收货地址</div>-->
<!--                            <div class="bd">安徽 合肥 瑶海区东方商城  (提现 收) 13666666666 <a href="">[修改]</a></div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <div class="pay-wrap-tit">
            在线支付
        </div>
        <div class="pay-wrap">
            <div class="pay-way">
                <div class="row">
                    <div class="col col-3">
                        <label><input class="check" type="radio" name="a" /><img src="/img/pay/zfb.jpg" /></label>
                    </div>
                    <div class="col col-3">
                        <label><input class="check" type="radio" name="a" /><img src="/img/pay/weixin.jpg" /></label>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-3">

                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-panel">
            <a href="" class="go-next ui-btn-theme">下一步</a>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
</body>
<script src="/js2/jquery.js"></script>
<link rel="stylesheet" href="/js2/icheck/style.css"/>
<script src="/js2/icheck/icheck.min.js"></script>
<script src="/js2/global.js"></script>
<script src="/layui/layui.js"> </script>
<script th:each="oi:${orderInfo}">
    $('.check').iCheck({
            radioClass: 'sty1-radio'
    });

    layui.use(["layer"],function (){
        var $ = layui.jquery
        var date1 = '[[${oi.createTime}]]';
        var d = new Date(date1);
        //订单生成时间往后15分钟
        d.setMinutes(d.getMinutes()+15);
        var f = function (){
            var now = new Date();
            var seconds = parseInt(((d.getTime()-now.getTime())/1000).toFixed());
            var m = Math.floor(seconds/60);
            var s = seconds - 60 * m;
            $(".time").html(''+m+'分'+s+"秒");
            //获取当前这个订单的状态
            $.get("/order/status?id="+[[${param.id}]],function (status){
                if(status === "已支付"){
                    location.href="/uc-order";
                }
            });
        }
        setInterval(f,1000);
    });


</script>
</html>